<template>
	<view class="content">
		<view>
			<goods-list :list="goodsList"></goods-list>
			<view class="padding">
				<!-- 筛选弹出层 -->
				<u-popup :show="show" @close="show=false" mode="bottom" :round="10">
					<view class="padding">
						<view class="shaixuan text">筛选</view>
						<view class="margin_top2  text_weight">标签</view>
						<view class="flexleft flex_wrap">
							<view class="flexbetween margin_top2 label_inp">
								<input type="text" placeholder="请输入标签" placeholder-style="color:rgba(153, 153, 153, 1);"
									v-model="bq">
								<!-- <view class="right_icon"></view> -->
							</view>
						</view>
						<view class="margin_top text_weight">时间</view>
						<view class="flexleft flex_wrap">
							<view class="flexcenter sanshi margin_top2" v-for="item in timeList" :key="item.id"
								@click="selectTimeBtn(item)">
								<view :class="item.id==selecttime?'haungsebtn':'huisebtn'">{{item.text}}</view>
							</view>
						</view>
						<!-- 时间 -->
						<view class="margin_top text_weight">自定义时间</view>
						<view class="flexcenter margin_top2" @click="zdysj">
							<view class="shijianbtn margin_right3" @click="zshijian">{{ztime}}</view>
							<view class="xian margin_right3"></view>
							<view class="shijianbtn" @click="yshijian">{{ytime}}</view>
						</view>
						<u-datetime-picker :show="zshow" @confirm="zconfirm" mode="date" @cancel="zshow= false"
							:minDate="minDate"></u-datetime-picker>
						<u-datetime-picker :show="yshow" @confirm="yconfirm" mode="date" @cancel="yshow= false"
							:minDate="minDate"></u-datetime-picker>
						<view class="flexbetween">
							<view class="bigbtns margin_top" @click="clearInvitation">重置</view>
							<view class="bigbtn margin_top" @click="searchInvitation">确认</view>
						</view>
					</view>
				</u-popup>
				<!-- 标签弹出层 -->
				<!-- <u-picker :show="show_label" :columns="columns" keyName="name" closeOnClickOverlay="true" @cancel="show_label=false" @confirm="invitationTypeConfirm"></u-picker> -->
				<!--  -->
				<view class="" id="test" v-show="Colortype==0" @click="publish"></view>
				<view class="" id="green" v-show="Colortype==1" @click="publish"></view>
				<view class="" id="blue" v-show="Colortype==3" @click="publish"></view>
				<view class="" id="sheng" v-show="Colortype==2" @click="publish"></view>
				<!-- 顶部搜索框 -->
				<view class="flexleft">
					<view class="sousuobox  flexleft">
						<view class="search margin_right2"></view>
						<input class="inputs" type="text" v-model="keywords" placeholder="请输入你要搜索的内容"
							@confirm="getInvitationList">
					</view>
					<view class="text_b color_ling margin_left2" @click="show = true">筛选</view>
					<image src="/static/image/home/screen.png" mode="" class="screen" @click="show = true"></image>
				</view>
				<!-- nav -->
				<view class="margin_top flexbetween">
					<view class="" style="width: 85%;">
						<scroll-view class="scroll-view_H" v-if="fold" scroll-x="true" scroll-left="120">
							<view class="flexleft">
								<template v-if="Colortype==0">
									<view :class="invitation_type_id==item.id?'fitmentActive0':'fitment'"
										v-for="item in invitationTypeList" :key="item.id"
										@click="invitation_type_id=item.id,getInvitationList()">
										{{item.name}}
									</view>
								</template>
								<template v-if="Colortype==1">
									<view :class="invitation_type_id==item.id?'fitmentActive1':'fitment'"
										v-for="item in invitationTypeList" :key="item.id"
										@click="invitation_type_id=item.id,getInvitationList()">
										{{item.name}}
									</view>
								</template>
								<template v-if="Colortype==2">
									<view :class="invitation_type_id==item.id?'fitmentActive2':'fitment'"
										v-for="item in invitationTypeList" :key="item.id"
										@click="invitation_type_id=item.id,getInvitationList()">
										{{item.name}}
									</view>
								</template>
								<template v-if="Colortype==3">
									<view :class="invitation_type_id==item.id?'fitmentActive3':'fitment'"
										v-for="item in invitationTypeList" :key="item.id"
										@click="invitation_type_id=item.id,getInvitationList()">
										{{item.name}}
									</view>
								</template>
							</view>
						</scroll-view>
					</view>
					<view class="unfold flexleft" @click="fold = !fold">
						<view class="">{{ fold ? "展开" : "收起" }}</view>
						<view class="">
							<image src="/static/image/home/la.png" mode="" class="img_la" v-if=" fold"></image>
							<image src="/static/image/my/top.png" mode="" class="img_la" v-if="!fold"></image>
						</view>
					</view>
				</view>
				<!-- 展开的东西 -->
				<view class="open" v-if="!fold">
					<scroll-view scroll-y="true">
						<view class="flexleft flex_wrap">
							<template v-if="Colortype==0">
								<view :class="invitation_type_id==item.id?'fitmentActive0 margin_top2':'fitment margin_top2'"
									v-for="item in invitationTypeList" :key="item.id"
									@click="invitation_type_id=item.id,getInvitationList()">
									{{item.name}}
								</view>
							</template>
							<template v-if="Colortype==1">
								<view :class="invitation_type_id==item.id?'fitmentActive1 margin_top2':'fitment margin_top2'"
									v-for="item in invitationTypeList" :key="item.id"
									@click="invitation_type_id=item.id,getInvitationList()">
									{{item.name}}
								</view>
							</template>
							<template v-if="Colortype==2">
								<view :class="invitation_type_id==item.id?'fitmentActive2 margin_top2':'fitment margin_top2'"
									v-for="item in invitationTypeList" :key="item.id"
									@click="invitation_type_id=item.id,getInvitationList()">
									{{item.name}}
								</view>
							</template>
							<template v-if="Colortype==3">
								<view :class="invitation_type_id==item.id?'fitmentActive3 margin_top2':'fitment margin_top2'"
									v-for="item in invitationTypeList" :key="item.id"
									@click="invitation_type_id=item.id,getInvitationList()">
									{{item.name}}
								</view>
							</template>

						</view>
					</scroll-view>
				</view>
				<!-- 帖子 -->
				<view class="zwtimg placeholderimg flexcenter" style="margin-top: 300rpx;"
					v-if="invitationList.data.length==0">
					<image src="@/static/image/bg-icons/placeholderimg.png" mode=""></image>
				</view>
				<view class="justify_between flex_wrap h5">
					<view class="shangpbox margin_top" v-for="item in invitationList.data" :key="item.id"
						@click="tiezi(item.id)">
						<view class="tiezi">
							<image :src="item.images_text[0]" mode="aspectFill"></image>
						</view>
						<view class="padding15 ffffff baibox">
							<view class="text_e text_three lianghang">{{item.title}}</view>
						</view>
						<view class="flexbetween ffffff padding15">
							<view class="flexleft">
								<image :src="item.user.avatar_text" mode="" class="kuang"></image>
								<view class="name">{{item.user.nickname}}</view>
							</view>
							<view class="flexleft">
								<image src="../../static/image/home/heart.png" mode="" class="heart" v-if="item.is_dz">
								</image>
								<image src="/static/image/home/kheart.png" mode="" class="heart" v-if="!item.is_dz">
								</image>
								<view class="num text_pee">{{item.dz_num}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>
<script>
	import goodsList from "@/components/goodList.vue"
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				goodsList: [],
				fold: true, // 场景展开或收起
				selecttime: 0, //筛选时间类型
				timeList: [{
					id: 1,
					text: "今日"
				}, {
					id: 2,
					text: "昨日"
				}, {
					id: 3,
					text: "本月"
				}, {
					id: 4,
					text: "上月"
				}, ],
				show: false,
				show_label: false,
				zshow: false,
				ztime: "开始时间", //开始时间
				minDate: "1673087541000",
				yshow: false,
				ytime: "结束时间", //结束时间
				columns: [], //帖子类型
				page: 1,
				limit: 12,
				start_time: "", //开始时间
				end_time: "", //结束时间
				bq: "", //标签
				keywords: "", //关键字
				invitation_type_id: "", //帖子分类id
				invitation_type: "请选择标签", //帖子分类
				invitationList: {
					data: []
				}, //帖子列表
				Colortype: 0, //0=褐色,1=绿色,2=深蓝,3=浅蓝
				invitationTypeList: []
			}
		},
		components: {
			goodsList
		},
		onShareAppMessage: function(options) {
			return {
				title: '工蜂商城',
				imageUrl: '@/static/logo.png',
				path: "pages/index/index?rec_uid=" + uni.getStorageSync("user_id"),
			}
		},
		onShareTimeline: function() {
			return {
				title: '工蜂商城',
				imageUrl: '@/static/logo.png',
				path: "pages/index/index?rec_uid=" + uni.getStorageSync("user_id"),
			}
		},
		onLoad() {
			uni.hideTabBar(); //隐藏tab
			this.Colortype = this.$store.state.type
			this.getInvitationTypeList()
		},
		onShow() {
			this.getInvitationList()
		},
		methods: {
			getInvitationList(isPage, page) { //帖子列表
				let _this = this
				httpRequest.request('/api/Invitation/index', 'GET', {
					page: page || 1,
					limit: _this.limit,
					start_time: _this.start_time,
					end_time: _this.end_time,
					bq: _this.bq,
					keywords: _this.keywords,
					invitation_type_id: _this.invitation_type_id,
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.invitationList;
						if (isPage == true) {
							_this.invitationList.data = dataList.data.concat(resList.data);
						} else {
							this.invitationList = res.data
							_this.invitationList.data = resList.data;
						}
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.invitationList;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getInvitationList(true, page);
			},
			getInvitationTypeList() { //帖子类型
				let _this = this
				httpRequest.request('/api/Invitation/invitationType', 'GET', {

				}).then(res => {
					if (res.code == 1) {
						// this.columns.push(res.data)
						this.invitationTypeList = res.data
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			invitationTypeConfirm(e) { //选择标签
				this.invitation_type = e.value[0].name
				this.invitation_type_id = e.value[0].id
				this.show_label = false
			},
			selectTimeBtn(item) { //选择时间
				this.selecttime = item.id
				let _this = this
				let start = "";
				let end = "";
				switch (item.id) {
					case 1:
						start = new Date(new Date().setHours(0, 0, 0, 0)).getTime();
						end = new Date(new Date().setHours(23, 59, 59, 999)).getTime()
						_this.start_time = _this.createDate(start)
						_this.end_time = _this.createDate(end)
						break;
					case 2:
						let mill = 24 * 60 * 60 * 1000
						start = new Date(new Date().setHours(0, 0, 0, 0)).getTime() - mill;
						end = new Date(new Date().setHours(23, 59, 59, 999)).getTime() - mill;
						_this.start_time = _this.createDate(start)
						_this.end_time = _this.createDate(end)
						break;
					case 3:
						let arr = this.getMonthStartDateAndDateRange()
						_this.start_time = _this.createDate(arr[0])
						_this.end_time = _this.createDate(arr[1])
						break;
					case 4:
						start = _this.getLastMonthFirst()
						end = _this.getLastMonthEnd()
						_this.start_time = _this.createDate(start)
						_this.end_time = _this.createDate(end)
						break;
				}
			},
			// 获得本月的开始日期和结束日期
			getMonthStartDateAndDateRange() {
				let oneDayLong = 24 * 60 * 60 * 1000;
				let now = new Date();
				let year = now.getFullYear();
				let monthStartDate = new Date(year, now.getMonth(), 1); //当前月1号
				let nextMonthStartDate = new Date(year, now.getMonth(), 1); //下个月1号
				let days = (nextMonthStartDate.getTime() -
					monthStartDate.getTime()) / oneDayLong; //计算当前月份的天数
				let monthEndDate = new Date(year, now.getMonth() + 1, days);
				let monthRange = [monthStartDate, monthEndDate];
				return monthRange;
			},
			//获取上月开始时间
			getLastMonthFirst() {
				let nowdays = new Date();
				let year = nowdays.getFullYear();
				let month = nowdays.getMonth();
				if (month == 0) {
					month = 12;
					year = year - 1;
				}
				if (month < 10) {
					month = '0' + month;
				}
				let myDate = new Date(year, month, 0);
				let startDate = year + '-' + month + '-01 00:00:00'; //上个月第一天
				return new Date(startDate).getTime()
			},
			//获取上月的结束时间
			getLastMonthEnd() {
				let nowdays = new Date();
				let year = nowdays.getFullYear();
				let month = nowdays.getMonth();
				if (month == 0) {
					month = 12;
					year = year - 1;
				}
				if (month < 10) {
					month = '0' + month;
				}
				let myDate = new Date(year, month, 0);
				let endDate = year + '-' + month + '-' + myDate.getDate() + ' 23:59:00'; //上个月最后一天
				return new Date(endDate).getTime()
			},
			clearInvitation() { //重置筛选
				this.invitation_type = ""
				this.invitation_type_id = ""
				this.selecttime = 0
				this.bq = ""
				this.ztime="开始时间"
				this.ytime="结束时间"
				this.start_time = ""
				this.end_time = ""
				this.minDate="1673087541000"
				this.show = false
				this.getInvitationList()
			},
			searchInvitation() { //确认筛选
				this.getInvitationList()
				// this.invitation_type = ""
				// this.invitation_type_id = ""
				// this.selecttime = 0
				// this.bq = ""
				// this.ztime="开始时间"
				// this.ytime="结束时间"
				// this.start_time = ""
				// this.end_time = ""
				this.minDate="1673087541000"
				this.show = false
			},
			zshijian() {
				this.zshow = true
			},
			yshijian() {
				this.yshow = true
			},
			zconfirm(e) {
				this.minDate = e.value
				this.ztime = this.createDate(e.value)
				this.start_time = this.ztime
				this.zshow = false
			},
			yconfirm(e) {
				this.ytime = this.createDate(e.value)
				this.end_time = this.ytime
				this.yshow = false
			},
			zdysj() {
				this.selecttime = 0
			},
			createDate(data) {
				let time = new Date(data);
				let year = time.getFullYear();
				let month = time.getMonth() + 1;
				month = month < 10 ? '0' + month : month
				let day = time.getDate();
				day = day < 10 ? '0' + day : day
				return year + '-' + month + '-' + day
			},
			publish() { //发布帖子
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: "/pages_post/fabutz"
				})
			},
			tiezi(id) { //帖子详情
				uni.navigateTo({
					url: "/pages_post/tiezixq?id=" + id
				})
			},
			list() { //商品列表
				uni.navigateTo({
					url: "/pages_index/shangpinlb"
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.open {
		width: 100%;
		// height: 500rpx;
		background-color: #fafafa;
	}

	/deep/.u-safe-area-inset-bottom {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
	}

	.label_inp {
		width: 100%;
		padding: 25rpx 37rpx 25rpx 66rpx;
		background-color: RGBA(247, 249, 250, 1);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
	}

	.jia {
		padding-top: 55rpx;
		color: #FD463E;
	}

	.nav {
		width: 100%;
	}

	/*  */
	.xian {
		width: 22rpx;
		height: 0rpx;
		background-color: #999999;
		border: 1rpx solid #999999;
	}

	.shijianbtn {
		padding: 20rpx 65rpx;
		background: #F7F9FA;
		border-radius: 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.huisebtn {
		width: 198rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background: #F7F9FA;
		border-radius: 41rpx;
	}

	.haungsebtn {
		width: 198rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(212, 139, 57, 1);
		background: rgba(212, 139, 57, .1);
		border-radius: 41rpx;
	}

	.sanshi {
		width: 33.33%;
	}

	.bigbtn {
		background-color: RGBA(212, 139, 57, 1);
		border-radius: 41rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 45%;
		height: 82rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	

	.bigbtns {
		background-color: #fff;
		border-radius: 41rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 45%;
		height: 82rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: RGBA(212, 139, 57, 1);
		border: 1rpx solid RGBA(212, 139, 57, 1);
	}

	.shaixuan {
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.img_la {
		width: 14rpx;
		height: 9rpx;
		margin-left: 4rpx;
	}

	.unfold {
		padding: 7rpx 20rpx 7rpx 20rpx;
		background: RGBA(240, 240, 240, 1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;

	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.fitment {
		background: RGBA(239, 239, 239, 1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid RGBA(239, 239, 239, 1);
		padding: 10rpx 35rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.fitmentActive0 {
		background: rgba(212, 139, 57, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #D48B39;
		padding: 10rpx 35rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #D48B39;
	}

	.fitmentActive1 {
		background: rgba(43, 201, 166, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #24bd9e;
		padding: 10rpx 35rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #24bd9e;
	}

	.fitmentActive2 {

		background: rgba(29, 90, 131, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #1e5a83;
		padding: 10rpx 35rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #1e5a83;
	}

	.fitmentActive3 {
		background: rgba(52, 159, 222, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #2a99d8;
		padding: 10rpx 35rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2a99d8;
	}

	.screen {
		width: 15rpx;
		height: 12rpx;
		margin-left: 7rpx;
	}

	#test {
		position: fixed;
		right: 5px;
		z-index: 301;
		bottom: 140px;
		width: 92rpx;
		height: 92rpx;
		background-image: url("@/static/image/home/jia.png");
		background-color: #fff;
		background-size: 100% 100%;
		border-radius: 50%;
	}


	#sheng {
		position: fixed;
		right: 5px;
		z-index: 301;
		bottom: 140px;
		width: 92rpx;
		height: 92rpx;
		background-size: 100% 100%;
		border-radius: 50%;
		background-color: #fff;
		background-image: url("@/static/image/color/shen_jia.png");
	}

	#green {
		position: fixed;
		right: 5px;
		z-index: 301;
		bottom: 140px;
		width: 92rpx;
		height: 92rpx;
		background-size: 100% 100%;
		border-radius: 50%;
		background-color: #fff;
		background-image: url("@/static/image/color/green_jia.png");
	}

	#blue {
		position: fixed;
		right: 5px;
		z-index: 301;
		bottom: 140px;
		width: 92rpx;
		height: 92rpx;
		background-size: 100% 100%;
		border-radius: 50%;
		background-color: #fff;
		background-image: url("@/static/image/color/blue_jia.png");
	}

	.heart {
		width: 23rpx;
		height: 20rpx;
	}

	.name {
		font-size: 20rpx;
		font-weight: 500;
		color: #666666;
	}

	.num {
		margin-left: 10rpx;
		color: #666666;
	}

	.kuang {
		width: 34rpx;
		height: 34rpx;
		border-radius: 50%;
		margin-right: 9rpx;
	}


	// 商品列表样式
	.shangpbox {
		width: 49%;
	}

	.baibox {
		border-radius: 0 0 11rpx 11rpx;
	}

	.tiezi {
		// width: 343rpx;
		height: 482rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 11rpx 11rpx 0 0;
		}
	}

	.inputs {
		width: 90%;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.sousuobox {
		width: 75%;
		background: #F3F3F3;
		padding: 20rpx 40rpx;
		border-radius: 60rpx;
	}


	.h5 {
		padding-bottom: 130rpx;
	}
</style>